<!DOCTYPE HTML>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Node.js + ES6 + Express</title>
</head>
<body>
    <!--id的意义，标签闭合-->
    <div id="site-nav">
        <!--class sn缩写-->
        <div class="sn-bd" >
            <!--div,p,h1,ul,table等为区块元素；em,a,span等为内联元素；新行开始-->
            <p class="sn-login-info">
                <em>喵，欢迎回来天猫</em><a class="sn-login" href="#">请登录</a><a class="sn-register" href="#">免费注册</a>
            </p>
            <!--列表元素，float和溢出-->
            <ul class="sn-quick-menu">
                <li class="menu-item"><a class="menu-hd" href="#">我的淘宝</a></li>
                <li class="menu-item"><a class="menu-hd" href="#">购物车</a></li>
                <li class="menu-item"><a class="menu-hd" href="#">收藏夹</a></li>
                <li class="sn-separator"></li>
                <li class="menu-item"><a class="menu-hd" href="#">手机版</a></li>
                <li class="menu-item"><a class="menu-hd" href="#">淘宝网</a></li>
                <li class="menu-item"><a class="menu-hd" href="#">商家支持</a></li>
                <li class="menu-item"><a class="menu-hd" href="#">网站导航</a></li>
            </ul>
        </div>
    </div>
    <div id="header">
        <div class="header-bd">
            <div id="header-banner"></div>
            <div id="header-search" class="mall-search">
                <form name="searchTop" class="ms-form clearfix"  action="#">
                    <div class="ms-input clearfix">
                        <label for="mq" style="display:none;" >搜索 天猫 商品/品牌/店铺</label>
                        <div class="ms-combobox">
                            <div class="ms-combobox-input-wrap">
                                <input id="mq" class="ms-combobox-input" type="text" name="q" accesskey="s" autocomplete="off" value="" role="combobox" aria-haspopup="true" title="请输入搜索文字" aria-label="请输入搜索文字">
                            </div>
                            <label for="mq" class="ms-combobox-placeholder">搜索 天猫 商品/品牌/店铺</label>
                        </div>
                        <button type="submit">搜索<s></s></button>
                        <input id="J_Type" type="hidden" name="type" value="p">
                        <input id="J_MallSearchStyle" type="hidden" name="style" value="">
                        <input id="J_Cat" type="hidden" name="cat" value="all">
                        <input type="hidden" name="vmarket" value="">
                    </div>
                </form>
                <ul class="hot-query">
                    <li class="hot-query-highlight"><a href="#">针织衫</a></li>
                    <li><a href="#">羽绒服</a></li>
                    <li><a href="#">四件套</a></li>
                    <li class="hot-query-highlight"><a href="#">电动牙刷</a></li>
                    <li><a href="#">客厅灯</a></li>
                    <li><a href="#">口红</a></li>
                    <li class="hot-query-highlight"><a href="#">手机</a></li>
                    <li><a href="#">运动鞋</a></li>
                    <li class="hot-query-highlight"><a href="#">牛奶</a></li>
                    <li><a href="#">仿真花</a></li>
                    <li><a href="#">洗发水</a></li>
                </ul>
            </div>
        </div>        
    </div>
    <div id="content">
        <div class="main-nav">
            <div class="inner-con0">
                <div class="inner-con1">
                    <div class="inner-con2 clearfix">
                        <a href="#" aria-label="天猫超市"><img alt="" src="/files/tm-market.png"><div class="hover-pic"></div></a>
                        <a href="#" aria-label="天猫国际"><img alt="" src="/files/tm-foren.png"><div class="hover-pic"></div></a>
                        <a href="#">天猫会员<div class="hover-pic"></div></a>
                        <a href="#">电器城<div class="hover-pic"></div></a>
                        <a href="#">喵鲜生<div class="hover-pic"></div></a>
                        <a href="#">医药馆<div class="hover-pic"></div></a>                                
                        <a href="#">营业厅<div class="hover-pic"></div></a>
                        <a href="#">魅力惠<div class="hover-pic"></div></a>
                        <a href="#">飞猪旅行<div class="hover-pic"></div></a>
                        <a href="#">苏宁易购<div class="hover-pic"></div></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="category">
            <div class="category-wrap">
                <div class="category-logo">
                    <img class="logo-img" src="/files/logo.png"/>
                </div>
                <div class="category-type">
                    <i class="fp-iconfont"></i>
                    <div class="text">商品分类</div>
                </div>
                <div class="category-tab">
                    <!--多包装了一层，用来巧妙的避免使用float属性-->
                    <div class="category-tab-wrap">
                        <ul class="normal-nav clearfix">         
                            <li class="j_MenuNav nav-item nav-item-0 category-loaded">
                                <i class="fp-iconfont nav-item-icon icon"></i><i class="dot fp-iconfont"></i>
                                <a href="#">女装</a>/<a href="#">内衣</a>                              
                                <b class="arrow"></b>
                            </li>
                        </ul>
                    </div>
                </div>
                <div calss="category-content">
                    <div class="pannel-con">
                        <div class="pannel-0">
                            <div class="hot-word-con" data-spm="subpannel2016025">                               
                                <div class="hot-word-line">
                                    <div class="line-title">
                                        <div class="title-text">当季流行</div>
                                        <i class="fp-iconfont"></i>
                                    </div>
                                    <div class="line-con">
                                        <a class="hot-word  highlight " href="#">春季新品</a>
                                        <a class="hot-word " href="#">商场同款</a>
                                        <a class="hot-word  highlight " href="#">气质连衣裙</a>
                                        <a class="hot-word " href="#">卫衣</a>
                                        <a class="hot-word  highlight " href="#">时髦外套</a>
                                        <a class="hot-word " href="#">毛针织衫</a>
                                        <a class="hot-word " href="#">休闲裤</a>
                                        <a class="hot-word " href="#">牛仔裤</a>
                                        <a class="hot-word " href="#">毛呢大衣</a>
                                        <a class="hot-word  highlight " href="#">无痕文胸</a>
                                        <a class="hot-word " href="#">运动文胸</a>
                                        <a class="hot-word  highlight " href="#">潮流家居服</a>
                                        <a class="hot-word " href="#">百搭船袜</a>
                                        <div class="seprate clearfix"></div>
                                    </div>
                                </div>                                    
                            </div>
                            
                            <div class="sub-logo-con">
                                <div>
                                    <a class="logo" href="#">
                                        <img src="/files/shops/abc.jpg_170x120q30.jpg">
                                    </a>
                                </div>
                                <div>
                                    <a class="activity clearfix" href="#">
                                        <img src="/files/activities/womens-378-174.jpg"> 
                                        <div class="title"></div>
                                        <div class="sub-title"></div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="banner-con loading">
                    <div class="slider-decoration left"></div>
                    <div class="slider-decoration right"></div>
                    <div class="banner-slider">
                        <div class="slider-content loading">
                            <div class="main-banner slider-pannel" style="display:block;">
                                <a href="#">
                                    <div class="tanx-banner-con">
                                        <img class="tanx-banner" src="https://img.alicdn.com/simba/img/TB1XouFiWigSKJjSsppSuubnpXa.jpg" >
                                    </div>
                                </a>
                            </div>                    
                        </div>
                        <div class="slider-nav">
                            <li class=""></li>
                            <li class="selected"></li>
                            <li class=""></li>
                        </div>
                    </div>
                </div>
        </div>
        <div class="activity">
            <div class="brand-wall-con">
                <div id="brand-wall"  class="brand-wall-bd clearfix">
                    <div class="brand-wall-item">
                        <div class="bwi-hd">
                            <span class="cn">品牌闪购</span>
                            <span class="en">BRAND SALE</span>
                            <a class="more" href="#">更多</a>
                        </div>
                        <a class="bwi-bd" href="#">
                            <img src="/files/activities/brand-1.webp"/>
                        </a>
                    </div>
                </div>
            </div>
            <div class="new-hot-brand-con">
                <div class="new-hot-brand-bd">
                    <div class="brand-list">
                        <ul id="brand-list" class="bl-bd">
                            <li class="bl-item">
                                <div class="bl-img"><img src="/files/brands/uyk.png"></div>
                                <a class="bl-mask" href="#"></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="new-floor-con">
                <div id="tmall-market" class="floor-line-con">
                    <div class="floor-name">
                        <img src="/files/floors/tmall-market.png">
                    </div>
                    <div class="floor-body">
                        <div class="floor-hot-word-con">
                            <a class="floor-hot-word" href="#">进口食品</a>
                        </div>
                        <div>
                            <div class="floor-banner-left">
                                <a href="#"><img src="/files/floors/tm-001.jpg"></a>
                            </div>
                            <div class="floor-banner-right">
                                <a class="grid grid-one" href="#">
                                    <div class="floor-item-wrap">
                                        <div class="floor-item-tag"></div>
                                        <img class="floor-item-image" src="/files/floors/tm-003.jpg">
                                        <div class="floor-item-title">
                                            花王妙而舒纸尿裤大号L58片日本进口尿不湿增量装
                                        </div>
                                        <div class="floor-item-price">￥119</div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wonderful">
            <h2 class="wonderful-title">
                <span class="text-con"><i class="fp-iconfont"></i>猜你喜欢</span>
            </h2>
            <div class="wonderful-content">
                <div>
                    <ul id="wonderful" class="wonderful-line">
                        <li class="wonderful-item">
                            <a class="wonderful-card" href="#">
                                <span class="wc-img"><img src="/files/wonderful/001.jpg"></span>
                                <span class="wc-info">
                                    <span class="wc-title">
                                        <em title="【直营】Dr.Jart+/蒂佳婷药丸面膜蓝色 绿色款 补水美白面膜 2盒">【直营】Dr.Jart+/蒂佳婷药丸面膜蓝色 绿色款 补水美...</em>
                                    </span>
                                    <span class="wc-price">￥149</span>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tm-end"></div>
        </div>
    </div>
    <div id="footer">
        <div id="tm-ensure">
            <div>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            </div>
        </div>
        <div id="tm-desc">
            <dl id="ensure">
                <dt><span>购物指南</span></dt>
                <dd>
                    <a href="#" target="_blank">免费注册</a>
                    <a href="#" target="_blank">开通支付宝</a>
                    <a href="#" target="_blank">支付宝充值</a>
                </dd>
            </dl>
            <dl id="beginner">
                <dt><span>天猫保障</span></dt>
                <dd>
                    <a href="#" target="_blank">发票保障</a> 
                    <a href="#" target="_blank">售后规则</a> 
                    <a href="#" target="_blank">缺货赔付</a>
                </dd>
            </dl>
            <dl id="payment">
                <dt><span>支付方式</span></dt>
                <dd>
                    <a href="#" target="_blank">快捷支付</a> 
                    <a href="#" target="_blank">信用卡</a> 
                    <a href="#" target="_blank">余额宝</a> 
                    <a href="#" target="_blank">蚂蚁花呗</a> 
                    <a href="#" target="_blank">货到付款</a>
                </dd>
            </dl>
            <dl id="seller">
                <dt><span>商家服务</span></dt>
                <dd>
                    <a href="#" target="_blank">天猫规则</a> 
                    <a href="#" target="_blank" class="join">商家入驻</a> 
                    <a href="#" target="_blank">商家中心</a> 
                    <a href="#" target="_blank">天猫智库</a> 
                    <a href="#" target="_blank">物流服务</a>
                    <a href="#" target="_blank">喵言喵语</a> 
                    <a href="#" target="_blank">运营服务</a>
                </dd>
            </dl>
            <dl id="mobile">
                <dt>手机天猫</dt>
                <dd>
                    <a href="#" class="join">
                        <img src="/files/tm-mobile.png" width="105" height="105" alt="手机天猫">
                    </a>
                </dd>
            </dl>
        </div>
        <div id="tm-copyright">
            <p class="footer-tmallinfo"> 
                <a href="#" target="_blank">关于天猫</a> 
                <a href="#" target="_blank">帮助中心</a> 
                <a href="#" target="_blank">开放平台</a> 
                <a href="#" target="_blank">诚聘英才</a> 
                <a href="#" target="_blank">联系我们</a> 
                <a href="#" target="_blank">网站合作</a> 
                <a href="#" target="_blank">法律声明</a>
                <a href="#" target="_blank">隐私权政策</a>
                <a href="#" target="_blank">知识产权</a>
                <a href="#" target="_blank">廉正举报</a> 
            </p>
            <p class="footer-otherlink"> 
                <a href="#" target="_blank">阿里巴巴集团</a>| 
                <a href="#" target="_blank">淘宝网</a> | 
                <a href="#" target="_blank">天猫</a> | 
                <a href="#" target="_blank">聚划算</a> | 
                <a href="#" target="_blank">全球速卖通</a> | 
                <a href="#" target="_blank">阿里巴巴国际交易市场</a>| 
                <a href="#" target="_blank">1688</a> | 
                <a href="#" target="_blank">阿里妈妈</a> | 
                <a href="#" target="_blank">飞猪</a> | 
                <a href="#" target="_blank">阿里云计算</a> | 
                <a href="#" target="_blank">AliOS</a> | 
                <a href="#" target="_blank">阿里通信</a> | 
                <a href="#" target="_blank">万网</a> | 
                <a href="#" target="_blank">高德</a> | 
                <a href="#" target="_blank">UC</a> | 
                <a href="#" target="_blank">友盟</a> | 
                <a href="#" target="_blank">虾米</a> | 
                <a href="#" target="_blank">阿里星球</a> | 
                <a href="#" target="_blank">来往</a> | 
                <a href="#" target="_blank">钉钉</a> | 
                <a href="#" target="_blank">支付宝</a>
            </p>
            <div class="footer-copyright">增值电信业务经营许可证：
                    <a href="#">浙B2-20110446</a>
                    网络文化经营许可证：
                    <a href="#" target="_blank">浙网文[2015]0295-065号</a>
                    <a href="#">12318举报</a>
                    互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com
                    <br>
                    <span class="footer-liangxinyao-cert" style="display:none;">
                        互联网药品交易服务资格证：
                        <a href="#" target="_blank">粤c20150002</a>
                        <a href="#" target="_blank">
                            <img src="https://img.alicdn.com/tps/TB1_qAKKVXXXXXjapXXXXXXXXXX-20-20.png">粤公网安备 44010602001483号
                        </a>
                        <a href="#" target="_blank">粤ICP备14088652号-2</a>
                    </span>
                    互联网药品信息服务资质证书编号：
                    <a href="#">浙-（经营性）-2017-0005</a>
                    <a href="#">
                        <img src="//img.alicdn.com/tps/TB1yEqRPXXXXXXPXpXXXXXXXXXX-20-20.png" style="position:relative;top:5px;vertical-align:baseline;">
                        浙公网安备 33010002000120号
                    </a>
                    <!--粗体文本b-->
                    <b>© 2003-2018 TMALL.COM 版权所有</b>
                    <p style="padding-top:10px;" class="footer-fp-img">
                        <a style="margin-right:10px" target="_blank" href="#"><img src="//img.alicdn.com/tps/i4/TB1j5gtHXXXXXXjaXXXydRxIFXX-73-30.jpg"></a>
                        <a target="_blank" href="#"><img src="//img.alicdn.com/tps/i1/TB13mgzHXXXXXbjXVXXzby4IVXX-80-30.jpg"></a>
                    </p>
                </div>
        </div>
    </div>
</body>